<template>
    <el-select v-model="channelId" placeholder="请选择频道" @change="Cchangge">
        <el-option v-for="channel in channels" :key="channel.id" :label="channel.name" :value="channel.id"></el-option>
    </el-select>
</template>

<script>
export default {
  name: 'Channel',
  props: {
    value: {
      type: Number
    }
  },
  watch: {
    value: function (val) {
      this.channelId = val // 父组件传过来的值只会接收一次 如果父组件继续修改值 则会传过来但是子组件不会主动获取 所以需要一个监听处理
    }
  },
  data () {
    return {
      channels: [],
      channelId: null // 不会随父元素传入的值进行变化  如果还需要接收则需要监听器进行监听父组件传来的值的变化
    }
  },
  created () {
    this.getChannel()
  },
  methods: {
    async getChannel () {
      const result = await this.$http.get('/mp/v1_0/channels')
      this.channels = result.data.data.channels
      console.log('频道', result)
    },
    Cchangge () {
      this.$emit('input', this.channelId)
    }
  }
}
</script>

<style>

</style>
